{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import video_inline_embed with context %}
{% from "macros-protocol.html" import split, picto, card, with context %}

{% extends "base-protocol-mozilla.html" %}

{% block page_title %}The State of Mozilla: 2020 Annual Report{% endblock %}
{% block page_desc %}Every year, in the spirit of openness upon which Mozilla was founded, we share publicly the ways we have protected, fought for and helped advance the internet in service of the people who rely on it every day.{% endblock %}
{% block page_image %}{{ static('img/foundation/annualreport/2020/share.png') }}{% endblock %}

{% block body_id %}annual-2020{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('annual_report_2019_2020') }}
{% endblock %}

{% block content %}
<main>
  <header class="c-hero-banner">
    <div class="mzp-l-content">
      <div class="c-banner-content">
        <div class="c-header-container">
          <h1>
            <span class="left">
                <strong class="l-highlight green">2020</strong><br>
                <strong class="l-highlight green">-2021</strong>
                <img src="{{ static('img/foundation/annualreport/2019/hero-dots.svg') }}" alt="" width="448" height="76">
            </span>
            <span class="right">State <br>of <br>Mozilla</span>
          </h1>
        </div>
      </div>{#--/.c-banner-content--#}
    </div>{#--/.mzp-l-content--#}
  </header>

  <div class="mzp-l-content mzp-t-content-lg c-page-intro">
    <h2><span class="highlight dark">Our impact</span></h2>
    <p>Every year we share publicly the ways our products and advocacy have helped build a better internet. One that is more joyful, safe, secure and trustworthy, in service of the people who rely on it every day. We outline how our organization is meeting the challenges of online life through an annual report: the State of Mozilla. This year’s report highlights our work in 2021 and is accompanied by our most recently filed financials which cover 2020.</p>

    <p>All of this work is made possible by the Mozilla community. Our staff, contributors, partners and donors, as well as every single person who uses our products and believes in the promise of a better internet.</p>

    <p>It’s going to take us all to make the internet better and we invite anyone to <a href="https://www.firefox.com/">download Firefox</a>, <a href="https://getpocket.com">Pocket</a> and <a href="{{ url('products.vpn.landing') }}">Mozilla VPN</a>, to <a href="{{ url('mozorg.contribute') }}">volunteer</a> with
      us or to <a href="{{ donate_url(location='annual-report') }}">make a donation</a> to support the work of internet health leaders around the world.</p>

    {{ video_inline_embed(
      id='ISYtFzMXVbM',
      title='Watch Mozilla: The big picture',
      image=resp_img(
        url='img/foundation/annualreport/2020/som-video-thumbnail.png',
        optional_attributes={
          'width': '928',
          'height': '522'
        }
      ),
    ) }}
  </div>

  <!-- Leadership Cards -->
  <div class="mzp-l-content leadership no-js-hidden">
    <h2 class="leadership-intro">A word<br> <strong>from our leadership</strong></h2>
    <div class="mzp-l-card-third">

      {{ card(
        title='Mitchell Baker',
        ga_title='Mitchell Baker',
        tag_label='Steering Committee',
        desc='Chief Executive Officer, Chairwoman of Mozilla Foundation',
        class='has-modal',
        attributes='data-modal-id="mitchell-baker-letter"',
        link_url='#mitchell-baker-letter',
        image=resp_img('img/foundation/annualreport/2019/leadership-mitchell.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

      {{ card(
        title='Mark Surman',
        ga_title='Mark Surman',
        tag_label='Steering Committee',
        desc='President and Executive Director',
        class='has-modal',
        attributes='data-modal-id="mark-surman-letter"',
        link_url='#mark-surman-letter',
        image=resp_img('img/foundation/annualreport/2019/leadership-mark.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

      {{ card(
        title='Angela Plohman & Eric Muhlheim',
        ga_title='Angela Plohman & Eric Muhlheim',
        tag_label='Steering Committee',
        desc='Executive Vice President & Chief Financial Officer',
        class='has-modal',
        attributes='data-modal-id="angela-eric-letter"',
        link_url='#angela-eric-letter',
        image=resp_img('img/foundation/annualreport/2020/leadership-angela-eric.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}
    </div>
  </div>

  <!-- Leadership Modals -->


  <div class="mzp-l-content js-modal-content">
    <!-- Mitchell Baker Letter -->
    <article data-modal-parent="mitchell-baker-letter" class="mzp-c-article c-leadership-article" id="mitchell-baker-letter">
      <div class="c-leadership-article-title" id="mitchell-baker-letter">
        <span class="highlight green">A word from our leadership</span>
        <h2>Mitchell Baker</h2>
        <span>Chief Executive Officer, Chairwoman of Mozilla Foundation</span>
      </div>
      <p>2021 opened people’s eyes – inside Mozilla and out – to what matters most. You see it in all walks of life: people reconsidering career paths, launching new projects, reassessing their priorities. The internet was not exempt. As an essential part of the infrastructure of daily life, many realized the internet simply does not work for them as well as it should. They also realized they don’t have to accept it as is. People want a safer, more joyful, less toxic and exploitative internet. That’s what Mozilla is building -- from offering a trusted VPN globally and bringing new privacy products and features to market, to encouraging platforms like Facebook and YouTube to get better at handling false and harmful content, and through our advocacy for a more privacy-preserving advertising ecosystem. People want a better Internet, and we at Mozilla are here to deliver it with them.</p>

      <p>Our job now is to use this momentum to build the products and technology that connect people to the joy of the internet and deliver on the promise of a better internet.</p>

      <p>We took a long hard look at our products and began a process of reassessment. How could they improve to bring people more satisfaction, more safety, and less harm?</p>

      <p>For Firefox, we started at the beginning. What should the role of the browser be on today’s internet? Historically the browser’s job has been to get out of the way, but we asked ourselves, could we create a Firefox that was not intrusive but directly improved people’s online experience, programmed to create an experience that was more delightful, more efficient and worked better on their behalf? Yes. We obsessed over eliminating distractions, extra clicks and wasted time, and created a redesigned browser that is simple, modern, and beautiful. This improved Firefox supports what people do most in Firefox. We followed with improved mobile and desktop features that speed up navigation and features that make browsing more colorful and enjoyable. </p>

      <p>Yet, we know you cannot truly enjoy the internet if it’s not safe, which is why we’ve continued to ship industry leading privacy protections in Firefox, including our award winning complete protection against cookie-based cross-site tracking and introducing HTTPS by default, automatically establishing a secure, encrypted connection over HTTPS whenever possible. We launched Relay and Relay Premium, our newest privacy and security product, a tool to allow people to protect themselves from the unceasing spam in their inboxes and safe from hackers and breaches. We also expanded our VPN offering to 9 new countries and improved our feature set to ensure our VPN is best in class.</p>

      <p>In light of the infodemic that coincided with the pandemic, we invested further in Pocket, our product that encourages deep reading and allows people to engage with information online on their own terms. We published more than 200 collections of curated articles to inform and inspire. We brought on 50 new advertisers, expanded into new markets and welcomed new syndicated partners into the Pocket family. Pocket continues to prove that good quality content alongside a strong brand and partners is a recipe for success.</p>

      <p>As advertising changes and the future of the web’s business model hangs in the balance, we have been exploring new and responsible ways to monetize that align with our values and set us apart. We’ve long believed the deprecation of cookies and a reckoning of the online advertising ecosystem was coming — and was much needed. Now it is here, and we are positioned to navigate the industry toward a new model of responsible advertising that respects people while delivering value to companies.</p>

      <p>By building products for the future, we are building a business for the future. Our investments and decisions have begun to bear fruit.The work we’ve done during the last few years to diversify our revenue sources and build a company and foundation with a strong and stable revenue base positions us well for the years to come.</p>

      <p>In many ways 2021 was a bridge to our future. We recommitted to our core goal: to build world-class products and programs that reflect our core values and help solve the problems of today’s internet. We focused on our users, reimagined the experience and value of our products, and put ourselves in a strong financial position to take on what’s next. All of this work was done alongside Mozilla's advocacy and philanthropy teams, who work with people around the world to champion the same values that guide our products. It is our unique ability to offer consumer products and services while also driving internet policy, and advocating for tech ecosystem change that will allow us to create not only a better internet for our users, but help build a better internet for all users.</p>

      <p>With the wind of change at our back, we are poised to shepherd in a new era online and help guide people through a better, more joyful internet. I couldn’t be more excited.</p>
    </article>

    <!-- Mark Surman Letter -->
    <article data-modal-parent="mark-surman-letter" class="mzp-c-article c-leadership-article" id="mark-surman-letter">
      <div class="c-leadership-article-title">
        <span class="highlight green">A word from our leadership</span>
        <h2>Mark Surman</h2>
        <span>President and Executive Director</span>
      </div>

      <p>In 2021, it was impossible to miss the headlines about the internet — and the growing influence of artificial intelligence.</p>

      <p>The Facebook Papers showed us just how influential the AI systems in consumer tech can be — they can shape how one person behaves or how millions of people vote.</p>

      <p>The papers also showed us how harmful these AI systems can be. They often misinform, manipulate, isolate and enrage.</p>

      <p>Frances Haugen, the former Facebook employee behind the papers, set off a frenzy that matched that of another whistleblower: Edward Snowden. With Snowden, the public and politicians suddenly understood how fragile our online privacy is. With Haugen, the same people are coming to understand just how influential — and sometimes harmful — these AI-driven platforms can be in our daily lives.</p>

      <p>It was discouraging to read these headlines. To learn that the technology in our everyday lives is designed in ways that hurt us. And to learn that the companies building this technology aren’t always interested in changing their ways. But it wasn’t surprising — all of this is why Mozilla chose to focus its philanthropic and advocacy resources on the topic of <a href="https://foundation.mozilla.org/en/internet-health/trustworthy-artificial-intelligence/" target="_blank" rel="external noopener">trustworthy AI</a>.</p>

      <p>We’ve had this focus for a couple of years now. And, we’ve stuck with it because we’re convinced that we — and others around the world — can do something to make today’s internet better. Better for people. Better for democracy. Better for society as a whole.</p>

      <p>Mozilla is part of a growing network of people and organizations who are trying to make AI more trustworthy — and to keep people accountable for using AI in irresponsible ways. What was previously a groundswell of concern about harmful AI has transformed into a groundswell of action. Right now, there are researchers and engineers, artists and activists who are no longer settling for empty promises about better AI. They are building solutions themselves. They are proving that it’s not just companies who can shape AI — it’s citizens and communities, too.</p>

      <p>In 2021, we saw citizens and communities not just demand more transparency around AI systems, but actively create it. We had no choice: This work has never been more urgent, with big elections like Germany's Bundestag and more elections on the horizon in Kenya, Brazil and beyond. And with online misinformation — about COVID, about climate change — increasing.</p>

      <p>At Mozilla, our <a href="https://foundation.mozilla.org/en/campaigns/tiktok-political-ads/" target="_blank" rel="external noopener">research</a> into political ads on TikTok pushed the platform to better meet its transparency pledge. And our <a href="https://foundation.mozilla.org/en/youtube/findings/" target="_blank" rel="external noopener">RegretsReporter browser extension</a> transformed tens of thousands of YouTube users into YouTube watchdogs, opening the lid on the black box that is YouTube’s recommendation algorithm.</p>

      <p>Mozilla isn’t the only one operating in this space. Citizens and communities around the globe are also making AI transparency a reality. At NYU, Laura Edelson and the AdObserver team are <a href="https://medium.com/cybersecurity-for-democracy/testimony-of-laura-edelson-nyu-cybersecurity-for-democracy-e0b7e046eb8" target="_blank" rel="external noopener">standing up to Facebook</a> about opaque political ads. And the Markup is doing similar, vital work with <a href="https://themarkup.org/series/citizen-browser" target="_blank" rel="external noopener">Citizen Browser</a>.</p>

      <p>In 2021, we also saw citizens and communities push for better data stewardship. By giving people, and not platforms, more control over data, we can rebalance the power dynamic online. The concept of Uber or Facebook controlling all our data — with little or no benefit to society at large — is falling out of favor.</p>

      <p>Meanwhile, organizations like <a href="https://www.theguardian.com/technology/2021/feb/19/uber-drivers-workers-uk-supreme-court-rules-rights" target="_blank" rel="external noopener">Worker Info Exchange</a> in the UK are putting workers, not platforms, in control of their data. (Worker Info Exchange is also a member of our <a href="https://foundation.mozilla.org/en/data-futures-lab/" target="_blank" rel="external noopener">Data Futures Lab</a>.) And at Mozilla, products like Common Voice and Rally are making data more democratic. <a href="https://commonvoice.mozilla.org/en" target="_blank" rel="external noopener">Common Voice</a> is building an open-source data set to make voice technology more inclusive. And <a href="https://rally.mozilla.org/" target="_blank" rel="external noopener">Rally</a> allows everyday internet users to donate their data to projects they believe in.</p>

      <p>So what does all this add up to? In 2021, the call for trustworthy AI began to feel like a genuine, robust movement — a critical mass of people making sure technology helps, rather than harms, humanity. And it’s growing to match other vital social movements of our time, like the push for racial and environmental justice. The values, energy and innovation Mozilla brings to tools like Firefox and Pocket are also being harnessed to fuel this new movement to ensure a bright future for artificial intelligence.</p>

      <p>As the world changes, the intersections between these different movements become clearer — from the researchers <a href="https://www.ajl.org/">unmasking biased algorithms</a>, to activists holding platforms to account for their <a href="https://stopfundingheat.info/about-the-campaign/" target="_blank" rel="external noopener">impact on the environment</a>.</p>

      <p>In 2022, Mozilla will continue the important work of growing this movement — and making trustworthy AI a reality.</p>
    </article>

    <!-- Angela & Roxi letter -->
    <article data-modal-parent="angela-eric-letter" class="mzp-c-article c-leadership-article" id="angela-eric-letter">
      <div class="c-leadership-article-title">
        <span class="highlight green">A word from our leadership</span>
        <h2>Angela Plohman</h2>
        <span>Executive Vice President</span>
        <h2>Eric Muhlheim</h2>
        <span>Chief Financial Officer</span>
      </div>

      <p>Mozilla stands apart for its unique governance structure. Founded as a community open-source project in 1998, Mozilla consists of two primary organizations: the Mozilla Corporation, a social enterprise, and its parent the Mozilla Foundation, a non-profit 501(c)3. The Mozilla Corporation earns revenue in the consumer technology marketplace — and then invests it back into products and ideas that further shape the marketplace for the public good. The Foundation earns revenue from both the Corporation and donations and grants — and then invests it in research, advocacy, people and projects that complement our consumer technology work.</p>

      <p>The two organizations pool their separate strengths — building exceptional consumer technology and fueling a global movement, respectively — to pursue a singular mission. </p>

      <p>This report provides a window into how the Mozilla Corporation and Mozilla Foundation operate, and it accompanies the audited 2020 financials for both organizations. Note: Each organization is governed by a separate board of directors.</p>

      <h3>A transformational journey towards growth and diversification</h3>

      <p>As outlined in our <a href="https://www.mozilla.org/en-US/about/manifesto/" target="_blank" rel="external noopener">manifesto</a>, we believe commercial involvement in the development of the internet brings many benefits. To that end, we build products, explore new technologies and shape a tech environment to give people more choice and control in their online lives.</p>

      <p>In 2019 we began a journey to transform our business and diversify our revenues — through new offerings within our core products and new products — to help scale Mozilla’s mission to build a better internet. Well on our way, our multi-year strategy was interrupted by the uncertainty that came with a global pandemic and a struggling economy. As it was for many companies, 2020 proved to be a challenging year. For Mozilla, it required us to make strategic but difficult decisions to allow the company to act faster and more nimbly, experiment more and adjust more quickly. It also crystallized our focus on better understanding our users in order to create new value, new products and invest in innovative solutions to their problems. Looking back now, as much as 2020 was challenging, it turned out to be a pivotal year responsible for our success and growth in 2021.</p>

      <p>As part of our focus to bring new value to our users' online experience, in 2020 we introduced a new product offering with Sponsored Tiles in the Firefox new tab. We saw immediate engagement from users and continued to invest and add new partners to this experience. In the fall of 2021 we also introduced Firefox Suggest, a new way to help people get to where they want to go online faster. We look forward to reporting more on this feature next year.</p>

      <p>We deepend and expanded partnerships in our Pocket experiences. In turn, we have seen encouraging signals that the steps we took in 2020 to bring more opportunities to users with quality advertising through partners we trust — and who share our values of privacy and user control — is resonating.</p>

      <p>In addition to our investment in diversifying revenue streams within our core products, we focused on bringing new products to market and expanding their availability in new markets. In February 2020, we launched Mozilla VPN, offering a virtual private network (VPN) that allows users to surf, stream, game and get work done while maintaining their privacy online. Our VPN is available to consumers on a month-to-month, semi-annual and annual subscription basis. In 2021, we expanded this offering to 9 new countries, resulting in a +450% increase in revenue from 2020 to 2021. We also launched Firefox Relay Premium in November of 2021, a subscription product to help users keep email inboxes spam free and safe from hackers.</p>

      <p>While the majority of Mozilla Corporation revenue continues to be generated from <a href="https://wiki.mozilla.org/Global_Search_Strategy_Status?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=state-of-mozilla-2019">global browser search partnerships</a>, in 2021 our revenue from new product offerings will grow 150% year on year and will account for 14% of our revenue. Growing these new businesses is key to our strategy to create a more diversified and healthier business model for the future.</p>

      <p>Overall in calendar year 2020, Mozilla Corporation generated $466M from search partnerships, subscriptions and advertising revenue. Our financial assets, including cash and investments, at the end of 2020 was $826M. In 2021, as a result of new core-product offerings, a resurgence in the ad-tech ecosystem and the launch of new products in market, we are forecasted to generate more than a half billion dollars in revenue and further strengthen our balance sheet.</p>

      <p>In 2022 the Corporation will build on the foundation of 2020 and the success of 2021. We are excited to create new world-class products to help people better navigate the web and deepen our relationship with our users, and invest in new innovations and products, while continuing investment in our core products Firefox, Pocket and Mozilla VPN to serve the hundreds of millions of people that regularly use them.</p>

      <h3>Investing in the movement</h3>

      <p>As a social enterprise, Mozilla Corporation’s revenue is largely reinvested in the organization. A portion of the Corporation’s annual revenue also flows to its parent organization, the Mozilla Foundation.</p>

      <p>In 2021, the Foundation continued its mission of growing the movement for internet health. Mozilla Foundation accomplished this by rallying everyday internet users to effect change; by providing grants and fellowships to people and projects on the frontlines of the movement; and by bringing vital issues like online privacy and trustworthy AI into the mainstream conversation.</p>

      <p>Last year, we published our annual Internet Health Report, using original reporting and data visualization to explore the impact of the internet in a year when we depended on it like never before. Specifically, the report focused on the harms of algorithmic bias; the growing appetite for more equitable data ownership; and the need for more transparency in AI systems. In 2020, $583,833 was spent in support of this agenda-setting work.</p>

      <p>The Foundation also uses grassroots organizing and public education campaigns to mobilize tens of millions of internet users. In 2021, our advocacy work urged Facebook, Venmo, TikTok and other big-tech companies to address issues like online privacy, the influence of paid political advertising and the need for more transparency on platforms. Last year, we spent $4,697,220 to support this advocacy work.</p>

      <p>The Foundation provides support to people and projects on the frontlines of the internet health movement. We do so through fellowships and awards for technologists and researchers addressing issues like how disinformation spreads on social media, and the need to build open-source voice datasets that represent all the world and all its languages. In 2021, we held our 11th-annual Mozilla Festival, the first virtual week-long convening for the internet health movement. Last year, $7,557,215 was spent to support this leadership development work.</p>

      <p>The Foundation’s revenue comes partially from the Mozilla Corporation. For 2020, the Mozilla Foundation received $16.3 million, per a trademark license agreement with Mozilla Corporation, allowing us to reinvest earnings from our products into advocacy and grant-making that grow the internet health movement.</p>

      <p>Individual donations and grants to Mozilla Foundation complement this revenue from our social enterprise work. In 2020, the Foundation raised $9.6M through these avenues. We view these contributions not as donations, but rather as a way to match our own investment in the broader movement for internet health. The majority of these resources are used to fund fellows and other organizations within the movement.</p>
    </article>
  </div>

  <div class="mzp-l-content">
    <ul class="c-report-pdfs">
      <li>
        <h3 class="mzp-u-title-xs">2020 Audited Financial Statement</h3>
        <a class="mzp-c-button" href="https://assets.mozilla.net/annualreport/2020/mozilla-fdn-2020-short-form-0926.pdf">Download PDF</a>
      </li>
      <li>
        <h3 class="mzp-u-title-xs">2020 Form 990</h3>
        <a class="mzp-c-button" href="https://assets.mozilla.net/annualreport/2020/mozilla-2020-form-990.pdf">Download PDF</a>
      </li>
    </ul>
  </div>

  <!-- Content Cards -->

  <div class="pixel-effect c-article-list">
    <!-- First Section -->

    <section class="no-js-hidden">
      <div class="c-section-intro-bg">
        <div class="mzp-l-content">
          <div class="c-section-intro">
            <h2><span class="highlight green">Building a more joyful internet</span></h2>

            <p>We know there are a lot of issues facing us on the internet today. We also know and believe that the internet is a source of joy, connection and delight. As creators, technologists and internet advocates, this is the internet we want more people to encounter and have access to, and this is the internet we want to help build.</p>

            <p>This year we thought about how our products can connect people to the joy of the internet. Whether that’s helping people get to where they want to go faster, with fewer clicks, delighting them with new ways to express who they are, or surfacing good quality content we know they will love — we delivered on our hope for a more joyful internet by making people’s online experience easier and more delightful.</p>
           </div>
        </div>
      </div>

      <!-- First section cards -->

      <!-- Firefox -->
      <div class="has-modal" data-modal-id="firefox-desktop-redesign">
        {% call split(
          image=resp_img(
            url='img/foundation/annualreport/2020/mr1-behind-design.jpg',
            optional_attributes={
              'class': 'mzp-c-split-media-asset'
            }
          ),
          block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
         ) %}
           <span>Products</span>
           <h2>An (even more) elegant Firefox for desktop</h2>
           <button class="mzp-c-button" type="button">Learn more</button>
        {% endcall %}
      </div>

      <div class="mzp-l-card-quarter mzp-l-content">
        {{ card(
          title='…and for mobile',
          ga_title='…and for mobile',
          tag_label='Products',
          class='has-modal',
          attributes='data-modal-id="firefox-mobile-redesign"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#firefox-mobile-redesign',
          image=resp_img('img/foundation/annualreport/2020/firefox-android.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

        {{ card(
          title='Suggestions you can trust',
          ga_title='Suggestions you can trust',
          tag_label='Products',
          class='has-modal',
          attributes='data-modal-id="firefox-suggest"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#firefox-suggest',
          image=resp_img('img/foundation/annualreport/2020/firefox-blog-header.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

        {{ card(
          title='We made online video even better',
          ga_title='We made online video even better',
          tag_label='Products',
          class='has-modal',
          attributes='data-modal-id="picture-in-picture"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#picture-in-picture',
          image=resp_img('img/foundation/annualreport/2020/blog-header-pip.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

        {{ card(
          title='Falling in love with color',
          ga_title='Falling in love with color',
          tag_label='Products',
          class='has-modal',
          attributes='data-modal-id="firefox-colorways"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#firefox-colorways',
          image=resp_img('img/foundation/annualreport/2020/firefox-colorways-header.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}
      </div>

      <div class="has-modal" data-modal-id="pocket-joy-collection">
        {% call split(
          image=resp_img(
            url='img/foundation/annualreport/2020/pocket-joy-collection.png',
            optional_attributes={
              'class': 'mzp-c-split-media-asset'
            }
          ),
          block_class='mzp-l-split-body-narrow mzp-t-split-nospace mzp-l-split-reversed'
        ) %}
          <span>Quality Content</span>
          <h2>We put joy on your reading list</h2>
          <button class="mzp-c-button" type="button">Learn more</button>
        {% endcall %}
      </div>

      <div class="mzp-l-card-third mzp-l-content">
        {{ card(
          title='Your back-stage podcast pass',
          ga_title='Your back-stage podcast pass',
          tag_label='Quality Content',
          class='has-modal',
          attributes='data-modal-id="pocket-slate-partnership"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#pocket-slate-partnership',
          image=resp_img('img/foundation/annualreport/2020/pocket-slate-podcast.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

        {{ card(
          title='And the winner is…',
          ga_title='And the winner is…',
          tag_label='Quality Content',
          class='has-modal',
          attributes='data-modal-id="pocket-hercampus"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#pocket-hercampus',
          image=resp_img('img/foundation/annualreport/2020/hercampus-blog-header.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

        {{ card(
          title='Unveiling the best articles of 2021',
          ga_title='Unveiling the best articles of 2021',
          tag_label='Quality Content',
          class='has-modal',
          attributes='data-modal-id="pocket-best-of-2021"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#pocket-best-of-2021',
          image=resp_img('img/foundation/annualreport/2020/pocket-best-of-2021.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}
      </div>
    </section>

    <!-- Second main section -->
    <section class="no-js-hidden">
      <div class="c-section-intro-bg">
        <div class="mzp-l-content">
          <div class="c-section-intro">
            <h2><span class="highlight green">Building a safer, more private internet</span></h2>

            <p>Privacy is the word. The internet is on the brink of the depreciation of third-party cookies, there are heated talks of the future of advertising on the web, and more and more people understand what exactly is at stake when their data is commoditized.</p>

            <p>We’ve been waiting a long time for this moment.</p>

            <p>People’s privacy and security is at the center of everything we do. It’s not a fad. It’s who we are. And the internet is better for all of us when it’s safer and more private. This year we continued our leadership in privacy bringing new features to our products, advocating for a more private web, calling on companies to join us, and raising awareness around companies that didn’t join us, until well, they did.</p>
          </div>
        </div>
      </div>

      <!-- Second section cards -->
      <div class="has-modal" data-modal-id="privacy-not-included">
        {% call split(
          image=resp_img(
            url='img/foundation/annualreport/2020/moz-pni-header.jpg',
            optional_attributes={
              'class': 'mzp-c-split-media-asset'
            }
          ),
          block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
        ) %}
          <span>Privacy</span>
          <h2>We help consumers choose  gadgets they can trust</h2>
          <button class="mzp-c-button" type="button">Learn more</button>
        {% endcall %}
      </div>

      <div class="mzp-l-content">
        <div class="mzp-l-card-third">
          {{ card(
            title='Mozilla and its allies demand that ISPs prioritize privacy',
            ga_title='Mozilla and its allies demand that ISPs prioritize privacy',
            tag_label='Privacy',
            class='has-modal',
            attributes='data-modal-id="mofo-letter-privacy"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#mofo-letter-privacy',
            image=resp_img('img/foundation/annualreport/2020/mofo-privacy-header.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}

          {{ card(
            title='DoH Canada!',
            ga_title='DoH Canada!',
            tag_label='Privacy',
            class='has-modal',
            attributes='data-modal-id="doh-canada"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#doh-canada',
            image=resp_img('img/foundation/annualreport/2020/doh-canada-rollout.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}

          {{ card(
            title='Making mobile apps less creepy',
            ga_title='Making mobile apps less creepy',
            tag_label='Apple IDFA campaign',
            class='has-modal',
            attributes='data-modal-id="apple-idfa"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#apple-idfa',
            image=resp_img('img/foundation/annualreport/2020/apple-idfa-campaign.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}
        </div>

        <div class="mzp-l-card-half">
          {{ card(
            title='Putting cookies where they belong',
            ga_title='Putting cookies where they belong',
            tag_label='Product',
            class='has-modal',
            attributes='data-modal-id="total-cookie-protection"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#total-cookie-protection',
            image=resp_img('img/foundation/annualreport/2020/total-cookie-protection.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}

          {{ card(
            title='The ever-expanding Mozilla VPN',
            ga_title='The ever-expanding Mozilla VPN',
            tag_label='Products',
            class='has-modal',
            attributes='data-modal-id="vpn-expansion"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#vpn-expansion',
            image=resp_img('img/foundation/annualreport/2020/vpn-blog-header.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}
        </div>

        <div class="mzp-l-card-third">
          {{ card(
            title='Firefox hangs a ‘not for sale’ sign on every site you visit',
            ga_title='Firefox hangs a ‘not for sale’ sign on every site you visit',
            tag_label='Privacy',
            class='has-modal',
            attributes='data-modal-id="privacy-control"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#privacy-control',
            image=resp_img('img/foundation/annualreport/2020/firefox-asset.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}

          {{ card(
            title='We told Venmo to take privacy more seriously. They listened',
            ga_title='We told Venmo to take privacy more seriously. They listened',
            tag_label='Privacy',
            class='has-modal',
            attributes='data-modal-id="venmo-privacy"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#venmo-privacy',
            image=resp_img('img/foundation/annualreport/2020/venmo-privacy.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}

          {{ card(
            title='Keeping your inbox at 0',
            ga_title='Keeping your inbox at 0',
            tag_label='Product',
            class='has-modal',
            attributes='data-modal-id="firefox-relay-premium"',
            aspect_ratio='mzp-has-aspect-16-9',
            link_url='#firefox-relay-premium',
            image=resp_img('img/foundation/annualreport/2020/firefox-relay-premium.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          )}}
        </div>
      </div>
    </section>

    <!-- Third main section -->
    <section class="no-js-hidden">
      <div class="c-section-intro-bg">
        <div class="mzp-l-content">
          <div class="c-section-intro">
            <h2><span class="highlight green">Building a more trustworthy internet</span></h2>

            <p>The future of the internet depends on being able to fix the problems we are facing today: untrustworthy algorithms, bias online, social media’s impact on society and democracies, an opaque business model that lends itself to harm. Yet to enact smart and comprehensive fixes that will help us build a better internet, we must first understand the root causes of the problems.</p>

            <p>This requires transparency — a lot more of it than we have today.</p>

            <p>Our work this year helped shine a light on what’s really happening online through new research, new innovations and teaming up with new and old friends to push for change. This might not be surprising coming from a company founded on open-source, but we just know the internet is a better place when it’s more open and transparent, and we intend to do whatever we can to help fight for it.</p>
           </div>
        </div>
      </div>

      <div class="has-modal" data-modal-id="privacy-advertising">
        {% call split(
          image=resp_img(
            url='img/foundation/annualreport/2020/firefox-privacy.jpg',
            optional_attributes={
              'class': 'mzp-c-split-media-asset'
            }
          ),
          block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
         ) %}
          <span>Fighting for Transparency</span>
          <h2>Ensuring the future of advertising is more private and transparent</h2>
          <button class="mzp-c-button" type="button">Learn more</button>
        {% endcall %}
      </div>

      <div class="mzp-l-card-half mzp-l-content">
        {{ card(
          title='Holding YouTube accountable for harmful recommendations',
          ga_title='Holding YouTube accountable for harmful recommendations',
          tag_label='Taking on Big Tech',
          class='has-modal',
          attributes='data-modal-id="youtube-regrets"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#youtube-regrets',
          image=resp_img('img/foundation/annualreport/2020/youtube-regrets.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

        {{ card(
          title='Pushing TikTok to take election disinformation seriously',
          ga_title='Pushing TikTok to take election disinformation seriously',
          tag_label='Taking on Big Tech',
          class='has-modal',
          attributes='data-modal-id="tiktok-research"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#tiktok-research',
          image=resp_img('img/foundation/annualreport/2020/tiktok-research.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}
      </div>

      <div class="has-modal" data-modal-id="nyt-op-ed">
        {% call split(
          image=resp_img(
            url='img/foundation/annualreport/2020/nyt-op-ed.jpg',
            optional_attributes={
              'class': 'mzp-c-split-media-asset'
            }
          ),
          block_class='mzp-l-split-body-narrow mzp-t-split-nospace'
         ) %}
          <span>Fighting for Transparency</span>
          <h2>Making a statement — in the New York Times</h2>
          <button class="mzp-c-button" type="button">Learn more</button>
        {% endcall %}
      </div>

      <div class="mzp-l-card-half mzp-l-content">
        {{ card(
          title='Fighting for ad transparency online',
          ga_title='Fighting for ad transparency online',
          tag_label='Fighting for Transparency',
          class='has-modal',
          attributes='data-modal-id="ad-transparency"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#ad-transparency',
          image=resp_img('img/foundation/annualreport/2020/ad-transparency.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}

        {{ card(
          title='Investigating disinformation on Twitter',
          ga_title='Investigating disinformation on Twitter',
          tag_label='Fighting for Transparency',
          class='has-modal',
          attributes='data-modal-id="kenya-research"',
          aspect_ratio='mzp-has-aspect-16-9',
          link_url='#kenya-research',
          image=resp_img('img/foundation/annualreport/2020/kenya-disinformation.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        )}}
      </div>
    </section>
  </div>

  <!-- First section modal content -->
  <div class="mzp-l-content js-modal-content">
    <!-- Desktop redesign -->
    <article data-modal-parent="firefox-desktop-redesign" id="firefox-desktop-redesign" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/mr1-behind-design.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">An (even more) elegant Firefox for desktop</span></h2>

          <p class="mzp-c-card-feature-desc">Firefox desktop received a major makeover in 2021. Our goal? To get you where you’re going online — fast, safe, and distraction-free. The makeover entailed a clean, new design; streamlined toolbar and menus; expanded privacy protections, and lots more.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/mozilla/news/modern-clean-new-firefox-clears-the-way-to-all-you-need-online/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Mobile redesign -->
    <article data-modal-parent="firefox-mobile-redesign" id="firefox-mobile-redesign" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/firefox-android.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">…and for mobile</span></h2>

          <p class="mzp-c-card-feature-desc">Firefox received a mobile makeover in 2021, too. In addition to a clean, new design, functionality was optimized for Android and iOS mobile devices. Search, navigation, and tab actions now take fewer steps, meaning you can focus on what matters most — browsing.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/mozilla/news/firefox-brings-you-a-new-homepage/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Firefox suggest -->
    <article data-modal-parent="firefox-suggest" id="firefox-suggest" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/firefox-blog-header.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Suggestions you can trust</span></h2>

          <p class="mzp-c-card-feature-desc">It can be challenging to navigate all the content, clutter, and click-bait online. So Mozilla built a new discovery feature directly into Firefox.</p>

          <p class="mzp-c-card-feature-desc">
            Firefox Suggest provides trustworthy suggestions related to your search, surfacing Wikipedia entries, Pocket articles, reviews, and other credible content to help you find what you're looking for.
          </p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/products/firefox/firefox-news/firefox-suggest/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Picture-in-picture -->
    <article data-modal-parent="picture-in-picture" id="picture-in-picture" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/blog-header-pip.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">We made online video even better</span></h2>

          <p class="mzp-c-card-feature-desc">What if you want to watch that cute raccoon video, but also check your inbox? What if you want to watch <em>two</em> cute raccoonn videos, but also check your inbox?</p>

          <p class="mzp-c-card-feature-desc">Now, Firefox has you covered. We introduced multiple <a target="_blank" rel="external noopener" href="https://blog.mozilla.org/en/products/firefox/latest-firefox-release-includes-multiple-picture-in-picture-and-total-cookie-protection/">picture-in-picture</a> (multi-PiP), allowing multiple videos to play at the same time. Multi-PiP is available on Mac, Linux and Windows, and includes keyboard controls for fast forward and rewind.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/products/firefox/how-to-watch-ncaa-basketball-tournament-firefox-multiple-picture-in-picture/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Pocket Best of 2021 -->
    <article data-modal-parent="pocket-best-of-2021" id="pocket-best-of-2021" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/pocket-best-of-2021.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Unveiling the best articles of 2021</span></h2>

          <p class="mzp-c-card-feature-desc">Each year Pocket’s Best Of awards gives us a glimpse into what it was like to live through the year, as told through the articles in our Pocket. What did we learn this year? That chronic sense of ‘blah’ that so many of us felt as the uncertainty of the pandemic wore on has a name: languishing, and also Pocket’s <a target="_blank" rel="external noopener" href="https://www.nytimes.com/2021/04/19/well/mind/covid-mental-health-languishing.html">No. 1 article</a>.</p>

          <p class="mzp-c-card-feature-desc">But don’t worry, we made sure we gave people tips on <a target="_blank" rel="external noopener" href="https://getpocket.com/collections/mood-of-the-year-languishing">how to leave languishing behind in 2021</a> — and start flourishing in 2022 by breaking free from stagnation and rekindling their spark.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://getpocket.com/collections/pockets-best-of-2021">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Firefox Colorways -->
    <article data-modal-parent="firefox-colorways" id="firefox-colorways" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/firefox-colorways-header.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Falling in love with color</span></h2>

          <p class="mzp-c-card-feature-desc">As a continuation of Firefox’s elegant new design, we introduced colorways, a new feature that allows our users to express their most authentic selves and experience joy while browsing the web. As we spend more time on the internet and more time in the browser, we wanted to give people the chance to make Firefox feel personal, fresh and exciting. We think that a safe and joyful internet is also a colorful one.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/products/firefox/introducing-new-colorways-for-firefox-94/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Pocket joy lists -->
    <article data-modal-parent="pocket-joy-collection" id="pocket-joy-collection" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/pocket-joy-collection.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">We put joy on your reading list</span></h2>

          <p class="mzp-c-card-feature-desc">2021 was another tough year — so we used Pocket to give users a pick-me-up. Our Joy List Project had luminaries like Mary H.K. Choi and Angelina Spicer share their very favorite essays, songs, podcasts, and recipes.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://getpocket.com/collections/the-joy-list-project">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Pocket + Slate -->
    <article data-modal-parent="pocket-slate-partnership" id="pocket-slate-partnership" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/pocket-slate-podcast.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Your back-stage podcast pass</span></h2>

          <p class="mzp-c-card-feature-desc">Pocket teamed up with Slate’s world-class podcast hosts to provide deep dives into your favorite episodes. Through curated Pocket Collections, podcast fans received their very own back-stage pass to explore the stories behind their favorite Slate podcast episode — straight from the hosts’ notes.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/products/pocket/pocket-slate-podcast-partnership-announcement/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Pocket + Hercampus -->
    <article data-modal-parent="pocket-hercampus" id="pocket-hercampus" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/hercampus-blog-header.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">And the winner is...</span></h2>

          <p class="mzp-c-card-feature-desc">This past May, Pocket and <a href="https://www.hercampus.com/" target="_blank" rel="external noopener">HerCampus</a> teamed up for an essay contest asking college students to reflect on what it’s like to come of age in a hyper-online world for a $5,000 cash prize and the opportunity to be published and promoted on Pocket. We had over 800 entries, and one winner — Esther Omole — a recent graduate of Stanford University.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/products/pocket/college-esssay-contest-winner-mozilla-pocket-hercampus/">Learn more</a>
        </div>
      </div>
    </article>
  </div>

  <!-- Second section modal content -->
  <div class="mzp-l-content js-modal-content">
    <!-- Privacy not included -->
    <article data-modal-parent="privacy-not-included" id="privacy-not-included" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/moz-pni-header.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">We help consumers choose  gadgets they can trust</span></h2>

          <p class="mzp-c-card-feature-desc">Mozilla's <a href="https://foundation.mozilla.org/en/privacynotincluded/" target="_blank" rel="external noopener">*Privacy Not Included</a> buyers guide had three installments in 2021. We helped consumers choose <a href="https://foundation.mozilla.org/en/blog/should-you-trust-your-dating-app-or-sex-toy/" target="_blank" rel="external noopener">dating apps</a>, <a href="https://foundation.mozilla.org/en/blog/privacy-problems-persist-on-top-video-call-apps-mozilla-research/" target="_blank" rel="external noopener">video call software</a>, and popular connected products that respect their personal data. Why? Because we believe privacy matters just as much as price and performance.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://foundation.mozilla.org/en/privacynotincluded/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Mofo letter -->
    <article data-modal-parent="mofo-letter-privacy" id="mofo-letter-privacy" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/mofo-privacy-header.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Mozilla and its allies demand that ISPs prioritize privacy</span></h2>

          <p class="mzp-c-card-feature-desc">Internet Service Providers (ISPs) like Comcast, Verizon, and AT&T have complete, unfettered, and unregulated access to our personal data. To better protect people's privacy, Mozilla and its allies EFF and the Internet Society are <a href="https://foundation.mozilla.org/en/blog/internet-advocates-call-on-isps-commit-to-basic-user-privacy-protections/">fighting for privacy commitments from ISPs</a>, and also and stricter privacy laws.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://foundation.mozilla.org/en/blog/internet-advocates-call-on-isps-commit-to-basic-user-privacy-protections/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- DoH -->
    <article data-modal-parent="doh-canada" id="doh-canada" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/doh-canada-rollout.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">DoH Canada!</span></h2>

          <p class="mzp-c-card-feature-desc">Firefox users in Canada receive upgraded privacy and security features with by-default DNS-over-HTTPS (DoH) rollout.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/mozilla/news/firefox-by-default-dns-over-https-rollout-in-canada/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Apple IDFA -->
    <article data-modal-parent="apple-idfa" id="apple-idfa" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/apple-idfa-campaign.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Making mobile apps less creepy</span></h2>

          <p class="mzp-c-card-feature-desc">Mozilla had been urging Apple to reform its app tracking policies and live up to its reputation as a privacy advocate. Apple listened, and <a href="https://foundation.mozilla.org/en/blog/applause-for-apples-idfa-decision/" target="_blank" rel="external noopener">announced the reform</a> in 2020. In 2021, that change went into effect, giving millions of consumers more privacy online.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://foundation.mozilla.org/en/blog/thank-you-apple-for-standing-strong-for-privacy/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Venmo privacy -->
    <article data-modal-parent="venmo-privacy" id="venmo-privacy" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/venmo-privacy.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">We told Venmo to take privacy more seriously. They listened</span></h2>

          <p class="mzp-c-card-feature-desc">For years, Mozilla has urged the payment app Venmo to remove its public feed, a feature that let users see transactions between total strangers. In July, Venmo finally listened — a big win for consumer privacy.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://foundation.mozilla.org/en/blog/venmo-finally-gets-the-message-people-want-privacy/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- VPN expansion -->
    <article data-modal-parent="vpn-expansion" id="vpn-expansion" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/vpn-blog-header.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">The ever-expanding Mozilla VPN</span></h2>

          <p class="mzp-c-card-feature-desc">In just one year, Mozilla VPN, our fast and easy-to-use Virtual Private Network service has expanded to seven more countries including Austria, Belgium, France, Germany, Italy, Spain and Switzerland. That makes 13 countries where Mozilla VPN is available. Our VPN service is also now available on Windows, Mac, Linux, Android and iOS platforms and with more payment options.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/mozilla/celebrating-mozilla-vpn-how-were-keeping-your-data-safe-for-you/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Global privacy control -->
    <article data-modal-parent="privacy-control" id="privacy-control" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/firefox-asset.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Firefox hangs a ‘not for sale’ sign on every site you visit</span></h2>

          <p class="mzp-c-card-feature-desc">Firefox joins other browsers to add a signal that sends mass ‘do not sell’ requests on behalf of users.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://twitter.com/washingtonpost/status/1453016457781055492?s=20">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Total cookie protection -->
    <article data-modal-parent="total-cookie-protection" id="total-cookie-protection" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/total-cookie-protection.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Putting cookies where they belong</span></h2>

          <p class="mzp-c-card-feature-desc">In February, Firefox began the rollout of <a target="_blank" rel="external noopener" href="https://blog.mozilla.org/security/2021/02/23/total-cookie-protection/">Total Cookie Protection</a> (TCP), a major privacy advance that provides comprehensive protections against cookie-based tracking and prevents cookies from tracking users from site to site as they browse the web.</p>

          <p class="mzp-c-card-feature-desc">The innovation was recognized by <a target="_blank" rel="external noopener" href="https://www.popsci.com/technology/best-security-innovations-2021/">Popular Science</a> for meaningfully limiting “the trails of crumbs you leave behind online” and made note of our “new approach [that] makes each site keep its tracking in a separate ‘cookie jar’ without pulling data from others.”</p>

          <p class="mzp-c-card-feature-desc">That means when you get pelted by the cookie disclaimers that are now the norm across the web, Firefox lets you click “accept” with more abandon and browse worry-free.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/security/2021/02/23/total-cookie-protection/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Firefox Relay Premium -->
    <article data-modal-parent="firefox-relay-premium" id="firefox-relay-premium" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/firefox-relay-premium.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Keeping your inbox at 0</span></h2>

          <p class="mzp-c-card-feature-desc">What’s sneakier than spam? Using an email alias instead of your real email address so nobody can send you spam in the first place.</p>

          <p class="mzp-c-card-feature-desc">This year, we officially launched Firefox Relay, a privacy-first product to help people do just that. Firefox Relay hides real email addresses to protect people’s identity and spare their inbox from being inundated with unwanted emails. And for those who asked for even more, we launched Firefox Premium Relay, the same service but with unlimited email aliases, a dashboard to keep it all straight and more.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/mozilla/firefox-relay-and-premium-service/">Learn more</a>
        </div>
      </div>
    </article>
  </div>

  <!-- Third section modal content -->
  <div class="mzp-l-content js-modal-content">
    <!-- Privacy advertising -->
    <article data-modal-parent="privacy-advertising" id="privacy-advertising" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/firefox-privacy.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Ensuring the future of advertising is more private and transparent</span></h2>
          <p class="mzp-c-card-feature-desc">With the opportunity to fix a broken advertising ecosystem, Mozilla championed a vision for advertising that is privacy preserving and more transparent. We used our technical expertise and role in the industry to advocate for <a href="https://www.verdict.co.uk/google-apple-privacy/" target="_blank" rel="external noopener">technology solutions</a> and legislative reforms that put the interests of users first and ensure privacy is a priority. Advertising is central to the internet economy and it can remain so without being harmful to consumer privacy and to society.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/mozilla/building-a-more-privacy-preserving-ads-based-ecosystem/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Youtube regrets -->
    <article data-modal-parent="youtube-regrets" id="youtube-regrets" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/youtube-regrets.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Holding YouTube accountable for harmful recommendations</span></h2>

          <p class="mzp-c-card-feature-desc">Mozilla <a href="https://foundation.mozilla.org/en/youtube/findings/" target="_blank" rel="external noopener">published findings</a> from our ambitious RegretsReporter research project, revealing that YouTube's algorithm recommends videos that violate the platform’s very own policies. The revelations were covered by the <a href="https://www.wsj.com/articles/youtubes-search-algorithm-directs-viewers-to-false-and-sexualized-videos-study-finds-11625644803" target="_blank" rel="external noopener">Wall Street Journal</a>, <a href="https://www.nbcnews.com/tech/tech-news/youtubes-recommendations-still-push-harmful-videos-crowdsourced-study-rcna1355" target="_blank" rel="external noopener">NBC News</a>, and <a href="https://www.marketplace.org/shows/marketplace-tech/ever-watch-something-on-youtube-and-wished-you-hadnt-youre-not-alone/" target="_blank" rel="external noopener">NPR</a> — and have already pressured YouTube to release more information about how its recommendation AI works.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://foundation.mozilla.org/en/campaigns/regrets-reporter/findings/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Tiktok research -->
    <article data-modal-parent="tiktok-research" id="tiktok-research" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/tiktok-research.png',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Pushing TikTok to take election disinformation seriously</span></h2>

          <p class="mzp-c-card-feature-desc">TikTok is the fastest-growing social media app, and so it's vital that the platform take election content seriously. But recent Mozilla research revealed TikTok wasn't living up to its election promises <a href="https://foundation.mozilla.org/en/campaigns/tiktok-political-ads/" target="_blank" rel="external noopener">in the U.S.</a> and <a href="https://foundation.mozilla.org/en/blog/mozilla-investigation-tiktok-fails-to-curb-disinformation-ahead-of-german-election/" target="_blank" rel="external noopener">in Germany</a>. When we went public with our findings, TikTok responded by shutting down the fake accounts Mozilla had identified.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://foundation.mozilla.org/en/campaigns/tiktok-german-election-2021/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- NYT -->
    <article data-modal-parent="nyt-op-ed" id="nyt-op-ed" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/nyt-op-ed.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Making a statement — in the New York Times</span></h2>

          <p class="mzp-c-card-feature-desc">Ashley Boyd, Mozilla's VP of Advocacy, authored a biting op-ed in the New York Times, calling on Facebook, YouTube, and other platforms to build more trustworthy AI systems. She writes: "Just as polluters green-wash their products by bedecking their packaging with green imagery, major tech platforms are opting for style, not substance."</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://www.nytimes.com/2021/08/08/opinion/tiktok-facebook-youtube-transparency.html">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Ad transparency -->
    <article data-modal-parent="ad-transparency" id="ad-transparency" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/ad-transparency.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Fighting for ad transparency online</span></h2>

          <p class="mzp-c-card-feature-desc">Internet users have a right to know who's trying to influence them online. So in 2021, Mozilla continued its pioneering work to make online advertising more transparent. We <a href="https://foundation.mozilla.org/en/blog/ahead-of-congressional-testimony-mozilla-and-nyus-edelson-say-facebook-cant-be-trusted/">stood up</a> for transparency researchers being bullied by Facebook, we <a target="_blank" rel="external noopener" href="https://blog.mozilla.org/netpolicy/2020/09/08/mozilla-offers-a-vision-for-how-the-eu-dsa-build-a-better-internet/">championed</a> the EU’s Digital Services Act, and more.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://blog.mozilla.org/en/mozilla/news/big-tech-cant-outrun-demands-for-accountability/">Learn more</a>
        </div>
      </div>
    </article>

    <!-- Kenya research -->
    <article data-modal-parent="kenya-research" id="kenya-research" class="mzp-c-card-feature mzp-has-aspect-16-9 mzp-l-card-feature-left-half">
      <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
          {{ resp_img(
            url='img/foundation/annualreport/2020/kenya-disinformation.jpg',
            optional_attributes={
              'class': 'mzp-c-card-image',
              'width': '930',
              'height': '523',
              'loading': 'lazy'
            }
          ) }}
        </div>
      </div>

      <div class="mzp-c-card-feature-content">
        <div class="mzp-c-card-feature-content-container">
          <img src="{{ static('img/foundation/annualreport/2019/modal-dots-2.svg') }}" alt="" width="448" height="40">
          <h2 class="mzp-c-card-feature-title"><span class="highlight green">Investigating disinformation on Twitter</span></h2>

          <p class="mzp-c-card-feature-desc">Mozilla Fellows Odanga Madung and Brian Obilo published not one, but <a href="https://foundation.mozilla.org/en/blog/new-research-in-kenya-disinformation-campaigns-seek-to-discredit-pandora-papers/" target="_blank" rel="external noopener">two</a> investigations into Kenya's disinformation industry and its connection to Twitter. Their work was covered by the <a href="https://www.bbc.com/news/world-africa-58474936" target="_blank" rel="external noopener">BBC</a> and the <a href="https://www.nytimes.com/live/2020/2020-election-misinformation-distortions#researchers-say-a-coordinated-misinformation-campaign-on-twitter-backed-kenyas-president" target="_blank" rel="external noopener">New York Times</a>, and spurred Twitter to <a href="https://foundation.mozilla.org/en/blog/responding-to-mozilla-fellows-research-twitter-removes-100-accounts/" target="_blank" rel="external noopener">remove dozens</a> fake accounts.</p>

          <a target="_blank" rel="external noopener" class="mzp-c-button mzp-t-secondary" href="https://foundation.mozilla.org/en/blog/fellow-research-inside-the-shadowy-world-of-disinformation-for-hire-in-kenya/">Learn more</a>
        </div>
      </div>
    </article>
  </div>
</main>

<div class="mzp-u-modal-content"></div>
{% endblock %}

{% block js %}
  {{ js_bundle('video-inline-embed') }}
  {{ js_bundle('annual_report_modal') }}
{% endblock %}
